<template>
	<view class="container">
		<view class="search-param">
			<uni-search-bar placeholder="搜索订单" @confirm="uniSearch" @cancel="show" v-model="vbeln"></uni-search-bar>
		</view>

		<view v-for="(saleOrder, index) in delisaleOrderList" :key="index" class="search-results-container">
			<div>
				<uni-row>
					<uni-col :span="16">
						<text>客户：{{saleOrder.name1}}</text>
					</uni-col>
					<uni-col :span="8" style="text-align: right;color: rgb(0, 226, 226);">
						<text>{{saleOrder.orderTime}}</text>
					</uni-col>
				</uni-row>
			</div>
			<div>
				<text>订单号：{{ saleOrder.vbeln}}</text><text
					style="color: red;">{{(saleOrder.vsnmr === '6' ? '（YT）' : saleOrder.vsnmr === '7' ? '（ZL）' : '')}}</text>
			</div>

			<div class="align-left-right" style="margin-bottom: 5px;">
				<text style="font-size: 16px; font-weight: bold;">物料明细</text>
				<text
					style="font-size: 16px; font-weight: bold;">共{{saleOrder.deliSaleOrderDetailList.length}}条明细</text>
			</div>


			<view v-for="(deliSaleOrderDetail, index) in saleOrder.deliSaleOrderDetailList" :key="index"
				class="search-resultDetails-container">
				<div>
					<text>物料描述：{{ deliSaleOrderDetail.arktx }}</text>
				</div>
				<uni-row>
					<uni-col :span="12">
						<div>
							<text>重量：{{ deliSaleOrderDetail.canweight }}/{{ deliSaleOrderDetail.kwmeng }} kg</text>
						</div>
					</uni-col>
					<uni-col :span="12">
						<div>
							物料单价：<text
								style="color: rgb(255, 151, 6);">￥{{ deliSaleOrderDetail.discountPrice ? deliSaleOrderDetail.discountPrice : deliSaleOrderDetail.price }}</text>
						</div>
					</uni-col>
				</uni-row>
			</view>

			<view>
				<button @tap="goToDeviverOrderApplyPage(saleOrder.vbeln)" class="apply-button">申请发货</button>
			</view>
		</view>
		
		<view style="padding-bottom: 150px;">
		</view>
		
		<view style="position: fixed; bottom: 0px; width: 100%;">
			<uni-row>
				<uni-col :span="24">
					<view>
						<button @click="goToHome" type="primary" >返回首页</button>
					</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	import {
		listSaleOrder,
		uniListSaleOrder
	} from '@/api/tms/saleOrder'

	export default {
		mounted() {

		},
		created() {
			uni.removeStorageSync('receive');
			const custName = this.$route.query.custName;
			console.log('******' + custName)
			if (custName) {
				this.customerName = custName;
				this.uniSearch();
			} else {
				this.uniSearch();
			}
		},
		data() {
			return {
				delisaleOrderList: [],
				deliSaleOrderDetailList: [],
				saleOrder: {
					name1: "",
					kunnr: "",
					vbeln: "",
					orderTime: "",
					vsnmr: "",
					pageNum: 1,
					pageSize: 500,
				},

				deliSaleOrderDetail: {
					arktx: "",
					smeng: "",
					price: ""
				},
				customerName: "",
				vbeln: "",
			};
		},
		methods: {
			goToHome() {
				uni.switchTab({
					url: '/pages/work/index',
				});
			},
			async search() {
				uniListSaleOrder({
					"vbeln": this.vbeln,
					"pageNum": 1,
					"pageSize": 500,
				}).then(response => {
					this.delisaleOrderList = response.rows;
				});
			},
			show() {
				this.saleOrder.name1 = this.customerName;
				this.saleOrder.vbeln = "";
				uniListSaleOrder(this.saleOrder).then(response => {
					this.delisaleOrderList = response.rows;
				});
			},
			uniSearch() {
				this.saleOrder.vbeln = this.vbeln;
				this.saleOrder.name1 = this.customerName;
				uniListSaleOrder(this.saleOrder).then(response => {
					this.delisaleOrderList = response.rows;
				});
			},
			goToDeviverOrderApplyPage(vbeln) {
				uni.setStorageSync("ecCustAddress", null)
				uni.navigateTo({
					url: '/pages/ec/deliverOrderApply/index?vbeln=' + vbeln,
				});
			},
		},
	};
</script>

<style>
	.container {
		dispaly: flex;
		flex-direction: row;
		flex: auto;
		background-color: #fff;
		font-size: 16px;
	}

	.search-param {
		background-color: #fff;
		text-align: center;
		/* 将内容设置为居中 */
	}

	.datetime-picker-container {
		flex: 1;
		text-align: center;
		/* 将内容设置为居中 */
	}

	.search-results-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 200%;
		padding: 3px;
		background-color: #fff;
		border-bottom: 2px solid #f5f5f5;
	}

	.search-resultDetails-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 200%;
		padding: 3px;
		background-color: #f5f5f5;
	}

	.search-result {
		flex: 1;
		/* 使每个内部元素均等分布 */
		margin-bottom: 10px;
		/* 设置底部边距 */
		background-color: #fff;
		border-top: 4px solid #f5f5f5;
		/* 设置底部边框颜色 */
		padding: 4px;
		/* 设置内边距 */
	}

	.spacing {
		margin-right: 100px;
	}

	.right-align-1 {
		text-align: right;
	}

	.right-align-2 {
		text-align: right;
	}

	.align-left-right {
		display: flex;
		justify-content: space-between;
		margin-right: 20px;
	}

	.search-results-container div {
		padding: 3px;
	}

	.apply-button {
		font-size: 12px;
		border: 1px solid orange;
		border-radius: 4px;
		color: orange;
		margin-right: 10px;
		width: 80px;
		margin-top: 4px;
		margin-bottom: 4px;
	}
</style>